<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      // 自定义颜色
      color: "rgba(255, 69, 0, 0.68)",
    };
  },
  methods: {
    // 头部自定义颜色 调用vuex里面的改变颜色方法
    change() {
      this.$store.commit("setColor", this.color);
    },
    // 身体自定义颜色 调用vuex里面的改变颜色方法
    change1() {
      this.$store.commit("setBodyColor", this.color);
    },
    // 页面头部颜色 传递点击的颜色
    hand(e) {
      this.$store.commit("setColor", e.target.style.backgroundColor);
      
    },
    // 页面身体颜色
    hand_body(e) {
      this.$store.commit("setBodyColor", e.target.style.backgroundColor);
    },
  },

})
</script>

<template >
  <div class="main">
    <h3>美化头部</h3>
    <ul class="ul1">
      <li >
        <div style="background: rgb(67, 56, 202)" @click="hand($event)"></div>
        <h4>默认色</h4>
      </li>
      <li>
        <div @click="hand($event)" style="background: rgb(240, 141, 1)"></div>
        <h4>太阳橙</h4>
      </li>
      <li>
        <div @click="hand($event)" style="background: rgb(233, 97, 123)"></div>
        <h4>山茶粉</h4>
      </li>
      <li>
        <div @click="hand($event)" style="background: rgb(200, 8, 81)"></div>
        <h4>宝石红</h4>
      </li>
      <li>
        <div style="background: rgb(196, 169, 192)" @click="hand($event)"></div>
        <h4>风信紫</h4>
      </li>

    </ul>
    <div class="color">
      自定义颜色:<span><el-color-picker v-model="color" show-alpha:false :predefine="predefineColors" size="small"
          @change="change">
        </el-color-picker></span>
    </div>
    <h3>主题美化</h3>
    <ul class="ul2">
      <li>
        <div @click="hand_body($event)" style="background: rgb(241, 242, 246)"> </div>
        <h4>默认色</h4>
      </li>
      <li>
        <div @click="hand_body($event)" style="background: rgb(0, 164, 197)"></div>
        <h4>孔雀蓝</h4>
      </li>
      <li>
        <div @click="hand_body($event)" style="background: rgb(152, 30, 174)"></div>
        <h4>水晶紫</h4>
      </li>
      <li>
        <div @click="hand_body($event)" style="background: rgb(233, 43, 119)"></div>
        <h4>满江红</h4>
      </li>
      <li>
        <div @click="hand_body($event)" style="background: rgb(130, 166, 140)"></div>
        <h4>松霜绿</h4>
      </li>

    </ul>
    <div class="color">
      自定义颜色:<span><el-color-picker v-model="color" show-alpha:false :predefine="predefineColors" size="small"
          @change="change1">
        </el-color-picker></span>
    </div>

  </div>
</template>
<style lang="scss" scoped>
.main {
  // height: 100%;
  background-color: aliceblue;
  overflow: hidden;
}

.color {
  margin-left: 30px;
}

h3 {
  margin: 30px 20px 15px;
  font-size: 25px;
}

.ul1 {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 50px;

  li {
    width: 15%;
    height: 150px;

    div {
      width: 100%;
      height: 150px;
      border-radius: 40px;

    }

    h4 {
      text-align: center;
      margin-top: 5px;
    }

  }
}

.ul2 {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 50px;

  li {
    width: 15%;
    height: 150px;

    div {
      width: 100%;
      height: 150px;
      border-radius: 40px;

    }

    h4 {
      text-align: center;
      margin-top: 5px;
    }

  }
}
</style>